<template>
  <div class="content has-text-centered">
    <h1 class="is-title is-bold">登录</h1>

    <div class="columns is-vcentered">
      <div class="column is-6 is-offset-3">
        <div class="box">
          <div v-show="error" style="color:red; word-wrap:break-word;">{{ error }}</div>
          <form>
            <label class="label">用户</label>
            <p class="control">
              <input v-model="data.body.username" class="input" type="text" placeholder="">
            </p>
            <label class="label">密码</label>
            <p class="control">
              <input v-model="data.body.password" class="input" type="password" placeholder="">
            </p>

            <p class="control">
              <label class="checkbox">
                <input type="checkbox" v-model="data.rememberMe">
                记住账户
              </label>
            </p>

            <hr>
            <p class="control">
              <span type="submit" @click="login" class="button is-primary">登陆</span>
              <span class="button is-default">取消</span>
            </p>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'

  export default {

    data () {
      return {
        data: {
          body: {
            username: 'admin',
            password: 'admin'
          },
          rememberMe: false
        },
        error: null
      }
    },
    mounted () {
      this.toggleSidebars(true)
    },
    computed:  mapGetters({
      sidebar: 'sidebar',
    }),
    methods: {
      ...mapActions([
        'toggleSidebars',
      ]),
      login () {
        this.toggleSidebars(false)
        this.$http.defaults.headers.common['Authorization'] = 'Basic d2ViX2FwcDo='
        this.$http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'

        let param = qs.stringify(this.data.body), vm = this

        this.$http.post('uaa/oauth/token','grant_type=password&'+param).then(function (res) {
          window.localStorage.setItem('Authorization',res.data.access_token)
          vm.$http.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.access_token
          vm.$http.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
          vm.$router.go(-1)

        })
      }
    }

  }
</script>

<style lang="scss" scoped>
  .is-title {
    text-transform: capitalize;
  }
</style>
